<div ng-form class="form-horizontal" name="filterPermissionForm" role="form">

  <div ng-show="!authorizationState.$loaded && !authorizationState.$error"
       class="loader">
    <span class="animate-spin glyphicon glyphicon-refresh"></span>
    {{ 'LOADING' | translate }}
  </div>

  <div ng-show="authorizationState.$error" uib-alert class="alert alert-danger" role="alert">
    <span class="glyphicon glyphicon-exclamation-sign"></span>
    <strong class="status">{{ 'FAILURE' | translate }}:</strong>
    <span class="message">{{ 'FILTER_FORM_PERMISSIONS_LOADING_FAILURE' | translate }}</span>
  </div>

  <div ng-show="authorizationState.$loaded && !authorizationState.$error">

    <div uib-alert class="alert alert-warning">
      <span class="glyphicon glyphicon-exclamation-sign"></span>
      <span>{{ 'FILTER_FORM_PERMISSIONS_EDIT_HINT' | translate }}</span>
    </div>

    <div class="global-access checkbox form-control-static"
         ng-show="!filter.id || (filter.id && accesses.update)">
      <label>
        <input type="checkbox"
               class="form-control"
               ng-model="isGlobalReadAuthorization"
               ng-change="globalReadAuthorizationChanged()"
               ng-disabled="filter.id && !accesses.update" />
         {{ 'FILTER_FORM_PERMISSIONS_GLOBAL' | translate }}
      </label>
    </div>

    <div class="user-read-permissions"
         ng-show="(!filter.id || (filter.id && accesses.update)) && !isGlobalReadAuthorization">
      <div class="form-group labels-left">
        <div class="col-xs-2 align-right">
          <button class="btn btn-link"
                  ng-click="addReadPermission()"
                  type="button"
                  ng-disabled="disableAddButton()">
            <span class="hidden-sm hidden-xs">{{ 'ADD_PERMISSION' | translate }}</span>
            <span class="glyphicon glyphicon-plus-sign"></span>
          </button>
        </div>

        <label class="col-xs-2 control-label">
          {{ 'FILTER_FORM_PERMISSION_GROUP_USER' | translate }}
        </label>
        <label class="col-xs-8 control-label">
          {{ 'FILTER_FORM_PERMISSION_IDENTIFIER' | translate }}
        </label>
      </div>

      <div class="form-group"
           ng-repeat="auth in getReadAuthorizations(authorizations)">
        <div class="col-xs-2 row-action"
             ng-show="!filter.id || (filter.id && accesses.update)">
          <button class="btn btn-link btn-remove"
                  ng-if="!isGlobalReadAuthorization"
                  ng-click="removeReadPermission(auth)">
            <span class="hidden-sm hidden-xs">
              {{ 'FILTER_FORM_PERMISSIONS_REMOVE' | translate }}
            </span>
            <span class="glyphicon glyphicon-remove-sign"></span>
          </button>
        </div>

        <div class="col-xs-2">
          <span class="fake-button">
            <span class="glyphicon"
                  ng-class="'glyphicon-' + (!!auth.userId ? 'user' : 'th')"></span>
          </span>
        </div>

        <div class="form-control-static"
             ng-class="{ 'col-xs-8': !filter.id || (filter.id && accesses.update) , 'col-xs-10': !(!filter.id || (filter.id && accesses.update)) }">

          {{ (auth.userId || auth.groupId) }}
        </div>
      </div><!-- repeat auth -->

      <div class="form-group new-permission"
           ng-if="showNewPermissionFields">
        <div class="col-xs-2 col-xs-offset-2">
          <button class="btn btn-default"
                  type="button"
                  tooltip-append-to-body="false"
                  uib-tooltip="{{ 'FILTER_FORM_PERMISSIONS_IDENTITY_TYPE_TOOLTIP' | translate }}: {{ (newPermission.type === 'user' ? 'FILTER_FORM_PERMISSIONS_IDENTITY_TYPE_USER' : 'FILTER_FORM_PERMISSIONS_IDENTITY_TYPE_GROUP') | translate }}"
                  ng-click="switchType()"
                  ng-disabled="isGlobalReadAuthorization">
            <span class="glyphicon"
                  ng-class="newPermission.type === 'user' ? 'glyphicon-user' : 'glyphicon-th'"></span>
          </button>
        </div>

        <div class="col-xs-8">
          <input type="text"
                 name="newPermission"
                 placeholder="{{ (newPermission.type === 'user' ? 'FILTER_FORM_PERMISSIONS_USER_ID' : 'FILTER_FORM_PERMISSIONS_GROUP_ID') | translate }}"
                 class="form-control"
                 ng-model="newPermission.id"
                 ng-change="validateNewPermission()"
                 ng-keydown="keyPressed($event)"
                 ng-readonly="isGlobalReadAuthorization"
                 ng-disabled="filter.id && !accesses.update" />

          <div ng-if="this.filterPermissionForm.newPermission.$invalid && this.filterPermissionForm.newPermission.$dirty"
               class="has-error">
            <span ng-show="this.filterPermissionForm.newPermission.$error.required"
                  class="help-block">
              {{ 'REQUIRED_FIELD' | translate }}
            </span>
            <span ng-show="this.filterPermissionForm.newPermission.$error.duplicate && newPermission.type === 'user'"
                  class="help-block">
              {{ 'FILTER_FORM_PERMISSIONS_DUPLICATE_USER' | translate }}
            </span>
            <span ng-show="this.filterPermissionForm.newPermission.$error.duplicate && newPermission.type === 'group'"
                  class="help-block">
              {{ 'FILTER_FORM_PERMISSIONS_DUPLICATE_GROUP' | translate }}
            </span>
          </div>
        </div>
      </div><!-- new perm -->

      <ul uib-pagination

        class="pagination-sm"
        ng-if="pages.total > pages.size"

        page="pages.current"
        ng-model="pages.current"
        ng-change="onPaginationChange(pages)"

        total-items="pages.total"
        items-per-page="pages.size"

        max-size="7"
        boundary-links="true"></ul>
    </div>

  </div>

</div>
